<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span:nth-of-type(2){
            font-weight: bold;
            font-style: italic;
            font-size: 18px;
            font-family: 宋体;
            font-family: 楷体;
        }

        b{
            font-weight: normal;
        }

        i{
            font-style: normal;
        }

        #box{
            width: 500px;
            height: 100px;
            background: pink;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!-- 
        span标签: 没有任何样式的标签

        1. 详写
            font-weight:    字体加粗
                            bold    加粗
                            normal  普通
            font-style:     字体倾斜
                            italic  倾斜
                            normal  普通
            font-size:      字体大小
                            px, %, em  等

                            不同的浏览器,对字体大小下限不一致
                            建议: 不要使用下限值
                            例如: chrome 下限值12px
                            firefox下限值:0px

            font-family     字体家族
                                宋体
                                楷体
                                黑体
                                Microsoft Yahei
                                ...

                                通用字体(一般写在font-family的最后面)
                                Serif
                                Sans-serif
                                Monospace
                                ...

                                多个字体之间用,(逗号)隔开
                                字体名如果有空格,建议加上引号

        2. 行高
            line-height:px 或 %

            实现"一行文字"垂直居中:
                line-height:与元素一样的高度 (在当前元素内实现垂直居中)

            line-height 不适合多行文字

        3. 简写
            完整font:[weight] | [style]
            size[/line-height] family
            基础font: size family

            注意:
            * font 讲究先后顺序
            *
            * | 竖线前后可以颠倒顺序
            * [] 中括号内的词可写可不写
     -->

     <span>老母鸡</span>
     <span>老母鸡</span>

     <b>老母鸡</b>
     <i>老母鸡</i>

     <div id="box">
         黄焖鸡米饭<br>
     </div>

     <p>石锅煲仔饭</p>
    
</body>
</html>